<template>
  <div class="page">
    <h1 @click="back">
      我是状态页
    </h1>
    <h2>{{ name }}</h2>
    <h2 @click="docount">
      {{ count }}
    </h2>
    <h3 @click="changeCountAsync">
      异步Action: {{ count }}
    </h3>
    <h3 @click="changeCountAsyncThen">
      异步Action - 回应: {{ count }} (操作提示:{{ msg }})
    </h3>
    <h3 @click="changeCountAsyncThenAsync">
      异步-Action-async/await - 回应: {{ count }} (操作提示:{{ asyncmsg }})
    </h3>
    <h2>{{ doneTodosCount }}</h2>
    <ul>
      <li>------ 列表 ------</li>
      <li v-for="item in list" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default ({
  components: {},
  data() {
    return {
      name: this.$route.params.username,
      msg: '',
      asyncmsg: ''
    }
  },
  computed: {
    count() {
      return this.$store.state.count || 0
    },
    doneTodosCount() {
      return this.$store.state.todos.filter(todo => todo.done).length
    },
    todos() {
      return this.$store.getters.doneTodos
    },
    todoId() {
      return this.$store.getters.getTodoById(2)
    },
    list() {
      return this.$store.state.list || []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      console.log(this.todos)
      console.log(this.todoId)
      console.log(this.$route.params.username)
    },
    docount() {
      this.$store.commit('increment', {
        id: 2,
        amount: 5
      })
      console.log('commit')
    },
    back() {
      this.$router.go(-1)
    },
    changeCountAsync() {
      this.$store.dispatch('incrementAsync', {
        id: 3,
        amount: 15
      })
    },
    changeCountAsyncThen() {
      console.log(this)
      this.msg = '开始修改'
      this.$store.dispatch('incrementAsyncThen', {
        id: 4,
        amount: 15
      }).then((res) => {
        console.log('res', res, this)
        this.msg = res.result
      })
    },
    changeCountAsyncThenAsync() {
      this.asyncmsg = 'async'
      this.$store.dispatch('actionB', {
        id: 5,
        amount: 25
      })
    }
  }
})
</script>

<style scoped>
h1 {
  color: orange;
}
</style>
